<template>
  <el-dialog :model-value="isShowDialog" title="新增用户" width="30%" @close="cancel">
    <el-form v-loading="isLoading" ref="formRef" :model="form" :rules="rules" label-width="120px" autocomplete="off">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="form.username" />
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="form.email" />
      </el-form-item>
      <el-form-item label="密码" prop="password" v-if="!form.id">
        <el-input autocomplete="new-password" type="password" v-model="form.password" />
      </el-form-item>
      <el-form-item label="角色">
        <el-input v-model="form.role" />
      </el-form-item>
      <el-form-item label="权限组名称">
        <el-select v-model="form.permission_group_id" class="w-1/1" placeholder="请选择权限组">
          <el-option v-for="item in permissionList" :key="item.id" :label="item.title" :value="item.id" />
        </el-select>
      </el-form-item>

      <el-form-item label="联系电话" prop="phone">
        <el-input v-model="form.phone" maxlength="11" />
      </el-form-item>
      <el-form-item label="介绍">
        <el-input v-model="form.introduction" type="textarea" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-row type="flex" justify="center">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="confirm">
          确定
        </el-button>
      </el-row>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { UserForm } from '@/api/user/types'
import { getUserForm, updateUser, addUser } from '@/api/user'
import { listPermissionOptions } from '@/api/permission'
import { IPermissionItem } from '@/api/permission/types'

const props = defineProps({
  isShowDialog: {
    type: Boolean,
    default: false
  },
  userId: Number
})

const emits = defineEmits(['update:is-show-dialog', 'update:list'])

const isLoading = ref(false)
const formRef = ref()
const permissionList = ref<IPermissionItem[]>([])
const form = ref<UserForm>({
  username: '',
  email: ''
})
const rules = {
  username: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
  email: [
    { required: true, message: '邮箱不能为空', trigger: 'blur' },
    { pattern: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/, message: '请输入正确的邮箱', trigger: 'blur' }
  ],
  password: [{ required: true, message: '密码不能为空', trigger: 'blur' }],
  phone: [{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }]
}

watch(
  () => props.isShowDialog,
  async val => {
    if (!val) return
    const { data } = await listPermissionOptions()
    permissionList.value = data
  }
)

watch(
  () => props.userId,
  async val => {
    isLoading.value = true
    const ret = await getUserForm(val as number)
    const {
      id,
      email,
      phone,
      username,
      role,
      password,
      introduction,
      permission_group_id,
      permission_group_title
    } = ret.data
    form.value = {
      id,
      email,
      phone,
      username,
      role,
      password,
      introduction,
      permission_group_id,
      permission_group_title
    }
    isLoading.value = false
  }
)

function cancel() {
  formRef.value.resetFields()
  form.value = { username: '', email: '' }
  emits('update:is-show-dialog', false)
}
async function confirm() {
  formRef.value.validate(async (isOK: boolean) => {
    if (!isOK) return
    if (form.value.id) {
      await updateUser(form.value)
    } else {
      await addUser(form.value)
    }

    ElMessage({ message: '操作成功', type: 'success' })
    emits('update:list')
    emits('update:is-show-dialog', false)
  })
}
</script>
<style></style>
